<script lang='ts'>
import { defineComponent, reactive, ref } from "vue";
import { Search } from "@element-plus/icons";
import { FindTaskUtil } from "../../../func/findTaskSearch";
import { mapView } from "../../../func/index";
import { queryAttribute } from "../../../../../model/mapModel/queryAttributeModel";
import store from '@/store/index'
export default defineComponent({
  name: "ProjectList",
  components: { Search },
  setup() {
    //下拉
    const value = ref();
    const resultList = ref();
    const options = ref([
      {
        value: "0",
        label: "2020建设用地项目报批",
      },
    ]);

    //输入
    const search = ref();
    const layerURL =
      "http://10.10.24.31:6080/arcgis/rest/services/G_TDGL/GT_JSYDXM_JSYDXMBP_2020/MapServer";
    const projectQuery = async () => {
      const layerIds = [0];
      const _searchFields = ["项目名称"];
      const findres = new FindTaskUtil(
        mapView,
        layerURL,
        layerIds,
        _searchFields,
        search.value
      );
      resultList.value = await findres.SearchResult();
    };
    const prodetaildata = ref();
    const activeNum = ref(-1);
    //点击搜索结果列表内的选项，定位到指定的点
    const attrClick = async (item: any, index: number) => {
      activeNum.value = index;
      const layerIds = [0];
      const _searchFields = ["FID"];
      const findres = new FindTaskUtil(
        mapView,
        layerURL,
        layerIds,
        _searchFields,
        item.FID
      );
      const searchRes = await findres.SearchLocation("polyline");      
      //将查询结果保存到stroe中，用来显示项目详细信息
      store.dispatch("prodetail/changedetail", searchRes[0]);
      
    };
    //分页操作
    const currentPage1 = ref(5);
    const handleSizeChange = (val: any) => {
      console.log(`${val} items per page`);
    };
    const handleCurrentChange = (val: any) => {
      console.log(`current page: ${val}`);
    };
    return {
      //选择列表
      value,
      options,
      //输入查询
      search,
      projectQuery,
      //分页相关
      currentPage1,
      handleSizeChange,
      handleCurrentChange,
      resultList,
      attrClick,
      activeNum,
    };
  },
});
</script>

<template>
  <div class="projectlist-page-wrap">
    <!-- 下拉 -->
    <div class="select-query">
      <el-select v-model="value" placeholder="请选择" style="width: 100%">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 查询输入 -->
    <div class="query-value">
      <el-input v-model="search" placeholder="请输入" class="input-with-select">
        <template #append>
          <el-button @click="projectQuery"
            ><el-icon :size="20" color="#aaa"><Search /></el-icon
          ></el-button>
        </template>
      </el-input>
    </div>
    <!-- 列表 -->
    <ul>
      <!-- <pro-detail :proDetailInfo="ProDetailProps"></pro-detail> -->
      <li
        v-for="(i, index) in resultList"
        :key="i"
        @click="attrClick(i, index)"
        :class="activeNum == index ? 'red' : 'yellow'"
      >
        <div class="list-data">
          <div hidden>{{ i.FID }}</div>
          <div class="left">{{ index + 1 }}</div>
          <div class="right">
            <span>{{ i.项目名称 }}</span>
            <span>{{ i.批准文号 }}</span>
          </div>
        </div>
      </li>
    </ul>
    <!-- 分页器 -->
    <div class="pagination-wrap">
      <el-pagination
        small
        v-model:currentPage="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next"
        :total="10"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style lang='less' scoped>
.red {
  border-bottom: 1px solid #1299f5;
  border-top: 1px solid #1299f5;
  border-left: 2px solid #1299f5;
  border-right: 2px solid #1299f5;
}
.projectlist-page-wrap {
  .select-query {
  }

  .query-value {
    padding: 10px 0;
  }

  .pagination-wrap {
    display: flex;
    justify-content: end;
  }
}
.list-data {
  padding: 20px 0;
  display: flex;
  justify-content: start;
  align-items: center;
  border-bottom: 1px dotted #1299f5;
  .left {
    margin-right: 20px;
  }
  .right {
    display: flex;
    flex-direction: column;
  }
}
</style>